<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    li,ul,ol{
        list-style: none;
    }
    body{
        background-color: #f5f5f5;
    }
    form{
        height:256px;
        width: 388px;
        margin: auto;
        text-align: center;
        margin-top: 30px;
    }
    input{
        width: 310px;
        height: 40px;
        margin-top: 20px;
        border: #ccc solid 1px;
    }
    .btn{
        background-color: #157efb;
    }
    h1{
        text-align: center;
        margin-top: 30px;
    }
    p{
        text-align: center;
        margin-top: 20px;
    }
   
</style>
<body>
    <h1>欢迎注册</h1>
    <p>提示注册账号的同时系统会自动生成钱包</p>
    <form action="">
               
                <input type="text" name="username" placeholder="   用户名"><br>
               
                <input type="text" name="password" placeholder="   密码"><br>
   
                <input type="text" name="rpassword" placeholder="   密码"><br>
           
                <input type="text" name="nickname" placeholder="   昵称"><br>
            
           <span></span><br>
           <input type="submit" class="btn" value="注册">
         
    
    </form>
</body>
<script src="./axios.js"></script>
<script>
    var oTet1 = document.querySelector("[name=username]")
    var oTet2 = document.querySelector("[name=password]")
    var oTet3 = document.querySelector("[name=rpassword]")
    var oTet4 = document.querySelector("[name=nickname]")
    var oForm = document.querySelector("form")
    var oSpan = document.querySelector("span")
    
    oForm.onsubmit = function(e){
        e.preventDefault()
        var username = oTet1.value
        var password = oTet2.value
        var rpassword = oTet3.value
        var nickname = oTet4.value

        if(!username || !password || !rpassword || !nickname) return alert("信息不完整，请重新输入！")

        if(password != rpassword)return alert("密码不一致!")

        axios({
            method: "post",
            url: "http://localhost:8888/users/register",
            headers:{
                "content-type":"application/x-www-form-urlencoded"
            },
            data:{
                username,
                password,
                rpassword,
                nickname,
            }
        }).then(res => {
            console.log(res)
            if(res.data.code != 1){
                oSpan.innerText = '注册失败，请重新注册'
                oSpan.style.color = 'red'
                return;
            }
            alert ("注册成功！")
            location.href = 'login.html'
        })
    }
</script>
</html>